<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script  src="vue.js"></script>
</head>
<body>
    <div class="app">
        商品<input type="text" v-model="goods"><br>
        价格<input type="number" v-model="price"><br>
        数量<input type="number" v-model="n"><br>
        <button @click="add">添加到购物车</button>
    
    
        <ul>
            <li v-for="item in list">
                 {{item.goods}}的数量是&nbsp;{{item.n}}, 单价是&nbsp;{{item.price}}, 小计:&nbsp;{{(item.n)*(item.price)}}
            </li>

            <li>
                {{statistics}}
            </li>
        </ul>
      </div>
      
      <script>
                new Vue({
                el: ".app",
                data() {
                    return {
                    goods: "",
                    price: 0,
                    n: 0,
                    list: []
                    }
                },
                methods: {
                    add() {
            
                    this.list.push({
                        goods: this.goods,
                        price: this.price,
                        n: this.n,
                    })
                    }
                },
                computed: {
                    statistics() {
                    let n = 0, s = 0
                    for (let item of this.list) {
                        n += item.n * 1
                        s += item.price * item.n
                    }
                    return `总计:  总数为${n} -----总价-----${s}`
                    }
                }
                })
      </script>
</body>
</html>